<template>
  <div>
    <detail-info :list='sightName'></detail-info>
    <detail-header></detail-header>
    <detail-list :list='categoryList'></detail-list>
  </div>
</template>

<script>
import detailInfo from "./component/detailInfo";
import detailHeader from "./component/detailHeader";
import detailList from "./component/detailList";
import axios from "axios";

export default {
  name: "detail",
  data () {
    return {
      sightName: '',
      categoryList:[]
    }
  },
  components: {
    detailInfo,
    detailHeader,
    detailList
  },
  methods: {
    getDetailInfo() {
      axios
        .get("http://localhost:3002/data", {
          params: {
            id: this.$route.params.id
          }
        })
        .then(res => {
          this.sightName=res.data.sightName
          this.categoryList=res.data.categoryList
        });
    }
  },
//   发现没有从新获取ajax请求，是因为mounted只执行一次，因为routerView被keep-alive保存在内存中了，所以我们需要使用keep-alive中使用exclude='组件名'
  mounted() {
    this.getDetailInfo();
  }
};
</script>

<style lang="less" scoped>
</style>
